<template>
  <view class="normal-login-container">
    <u-button
      type="primary"
      text="哈哈哈"
    />
    <view class="logo-content align-center justify-center flex">
      <image
        style="width: 100rpx;height: 100rpx;"
        :src="globalConfig.appInfo.logo"
        mode="widthFix"
      />
      <text class="title">若依移动端登录</text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon" />
        <input
          v-model="loginForm.username"
          class="input"
          type="text"
          placeholder="请输入账号"
          maxlength="30"
        >
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon" />
        <input
          v-model="loginForm.password"
          type="password"
          class="input"
          placeholder="请输入密码"
          maxlength="20"
        >
      </view>
      <view
        v-if="captchaEnabled"
        class="input-item flex align-center"
        style="width: 60%;margin: 0px;"
      >
        <view class="iconfont icon-code icon" />
        <input
          v-model="loginForm.code"
          type="number"
          class="input"
          placeholder="请输入验证码"
          maxlength="4"
        >
        <view class="login-code">
          <image
            :src="codeUrl"
            class="login-code-img"
            @click="getCode"
          />
        </view>
      </view>
      <view class="action-btn">
        <button
          class="login-btn cu-btn block bg-blue lg round"
          @click="handleLogin"
        >
          登录
        </button>
      </view>
    </view>

    <view class="xieyi text-center">
      <text class="text-grey1">登录即代表同意</text>
      <text
        class="text-blue"
        @click="handleUserAgrement"
      >
        《用户协议》
      </text>
      <text
        class="text-blue"
        @click="handlePrivacy"
      >
        《隐私协议》
      </text>
    </view>
  </view>
</template>

<script>

// export default {
//   data() {
//     return {
//       codeUrl: '',
//       captchaEnabled: true,
//       globalConfig: getApp().globalData.config,
//       loginForm: {
//         username: 'admin',
//         password: 'admin123',
//         code: '',
//         uuid: ''
//       }
//     }
//   },
//   created() {
//     this.getCode()
//   },
//   methods: {
//     // 隐私协议
//     handlePrivacy() {
//       let site = this.globalConfig.appInfo.agreements[0]
//       this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
//     },
//     // 用户协议
//     handleUserAgrement() {
//       let site = this.globalConfig.appInfo.agreements[1]
//       this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
//     },
//     // 获取图形验证码
//     getCode() {
//       getCodeImg().then(res => {
//         this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
//         if (this.captchaEnabled) {
//           this.codeUrl = 'data:image/gif;base64,' + res.img
//           this.loginForm.uuid = res.uuid
//         }
//       })
//     },
//     // 登录方法
//     async handleLogin() {
//       if (this.loginForm.username === '') {
//         this.$modal.msgError('请输入您的账号')
//       } else if (this.loginForm.password === '') {
//         this.$modal.msgError('请输入您的密码')
//       } else if (this.loginForm.code === '' && this.captchaEnabled) {
//         this.$modal.msgError('请输入验证码')
//       } else {
//         this.$modal.loading('登录中，请耐心等待...')
//         this.pwdLogin()
//       }
//     },
//     // 密码登录
//     async pwdLogin() {
//       this.$store.dispatch('Login', this.loginForm).then(() => {
//         this.$modal.closeLoading()
//         this.loginSuccess()
//       }).catch(() => {
//         if (this.captchaEnabled) {
//           this.getCode()
//         }
//       })
//     },
//     // 登录成功后，处理函数
//     loginSuccess(result) {
//       // 设置用户信息
//       this.$store.dispatch('GetInfo').then(res => {
//         this.$tab.reLaunch('/pages/index/index')
//       })
//     }
//   }
// }
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}
	}
</style>
